<script type="text/javascript" src="<?=$config['site_templateurl'];?>/js/jquery.imgareaselec.js"></script>
<script src="/public/js/jquery.ui.widget.js"></script>
<script src="/public/js/jquery.iframe-transport.js"></script>
<script src="/public/js/jquery.fileupload.js"></script>
    <div id="clipbox" class="clearfix">
<div class="frame" >
    <img id="photo" src="<?=$avatar_source?>" >
</div>
<div id="preview" >
        <img src="<?=$avatar?>" >
</div>
<a href="javascript:" class="clipbtn">裁剪图片</a>
<form name="avatarup" method="post" class="upavatarform" action="<?=site_url('member/avatarupload')?>" target="avatarFrame" enctype="multipart/form-data">
<div class="filewrapper"><input type="file" name="avatar" onchange="checkvalue(this)" /><span>选择新头像</span></div>
</form>
</div><br />
<p><b>注意：</b>　上传新头像后旧图片将被删除，格式支持:jpg,png,gif，大小不超过2M，最佳尺寸400 X 400(px)</p><br />
<iframe name="avatarFrame" width="0" height="0" border="0"></iframe>
<script type="text/javascript" >
var uploaded=false;
jQuery(function ($) {
    'use strict';

    var sa=$('#photo');
    // Change this to the location of your server-side upload handler:
    var url = '<?=site_url('member/avatarupload')?>';
    $('.filewrapper').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $('.filewrapper').css('backgroundPosition','-100px top');
            if(data.result.errorcode != 0){
                return tip(data.result.message,data.result.errorcode,2);
            }
            tip(data.result.message,0,2);
            uploaded=true;
            $('#preview img').attr('src',data.result.image);
            $('#photo').attr('src',data.result.image)
            .imgAreaSelect({
                aspectRatio : '1:1',
                //handles : true,
                fadeSpeed : 200,
                onSelectChange : preview
            });
            document.avatarup.reset();
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10)-100;
            $('.filewrapper').css('backgroundPosition',progress+'px top');
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');

    //sa.setSelection(0,0,100,100);
    $('.clipbtn').click(function(){
        if(!uploaded)return tip('请先上传新头像',1);
        var sets=sa.data('imgAreaSelect').getSelection();
        $.ajax({
            url:location.href,
            type:'POST',
            dataType:'json',
            data:'width='+sets.width+'&height='+sets.height+'&x1='+sets.x1+'&x2='+sets.x2+'&y1='+sets.y1+'&y2='+sets.y2+'&y2='+sets.y2,
            success:function(j){
                tip('裁剪成功！',0,2);
               location.reload();
            }
        })
    });
});

function checkvalue(fp){
    var fv=fp.value;
    var span=$(fp).parents('div').eq(0).find('span');
    if(fv==''){
        span.text('选择新头像');
    }else{
        var filename=fv.substr(Math.max(fv.lastIndexOf('/'),fv.lastIndexOf('\\'))+1);
        span.text(filename);
    }
}
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
	var picX = img.width;
    var picY = img.height;	
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleY * picX) + 'px',
		height: Math.round(scaleX * picY) + 'px',
		marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
		marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}
</script>